<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板语法</title>
    <script src="./vue.js"></script>
</head>
<body>
    <!-- 数据绑定最常用的是使用Mustache语法（双大括号）的文本插值 -->
    <div id="app-1">
        <span> {{ msg }}</span>
        <button v-on:click="changeMsg">Change it!</button>
    </div>

    <!-- // v-once指令：一次性插值，内容不再更新 -->
    <div id="app-2">
        <span v-once> {{ msg }}</span>
        <button v-on:click="changeMsg">Change it!</button>
    </div>

    <!-- 使用v-html指令输出真正的html -->
    <div id="app-3">
        <p>Using mustaches: {{ rawHtml }}</p>
         <!-- span内部的内容会被替换为属性值rawHtml -->
         <!-- 不能使用v-html来复合局部模板（Vue不是基于字符串的模板引擎） -->
        <p>Using v-html mustaches: <span v-html="rawHtml"></span></p>
    </div>

    <!-- Mustache语法不能作用在元素属性上： 应该使用v-bind指令 -->
    <!-- 其中，isButtonDisabled值为null/undefined/false时，disabled属性不会渲染在该元素中 -->
    <button v-bind:disabled="isButtonDisabled">Button</button>

    <!-- 对所有的数据绑定都支持单个JavaScript表达式但不包括除此之外的（语句/代码块） 
         不要在模板表达式中试图访问用户定义的全局变量
    -->

    <!-- 一些指令能够接受一些参数（在指令后面以冒号表示） -->
    <!-- 这里的href是参数，告知v-bind指令将该元素的href特性与表达式url的值绑定 -->
    <a v-bind:href="url">...</a>
    <!-- 参数是监听的事件名 -->
    <a v-on:click="doSomething">...</a>

    <!-- 动态参数：使用"[]"括起来的表达式作为指令的参数 -->
    <!-- 如果vue实例中data属性attributeName值为href，等价于v-bind:href="url" -->
    <!-- 动态参数表达式有一些语法约束，
        因为某些字符，例如空格和引号，放在 HTML 特性名里是无效的。
        同样，在 DOM 中使用模板时你需要回避大写键名。 -->
    <a v-bind:[attributeName]="url">...</a>

    修饰符以英文句号指明的特殊后缀，指出一个指令应该以什么方式绑定
    <!-- 例如：.prevent修饰符告诉v-on指令在触发事件时调用event.preventDefault(); -->
    <form v-on:submit.prevent="onSubmit">...</form>

    <!--
        缩写指令：
        v-bind的缩写：v-bind:href => :href
        v-on的缩写：v-on:click => @click
    -->
    <script>
        var app1 = new Vue({
            el: "#app-1",
            data: {
                msg: "hello, Vue!"
            },
            methods: {
                changeMsg: function () {
                this.msg = this.msg.split("").reverse().join("");
                }
            }
        });
        var app2 = new Vue({
            el: "#app-2",
            data: {
                msg: "hello, Vue!"
            },
            methods: {
                changeMsg: function () {
                this.msg = this.msg.split("").reverse().join("");
                }
            }
        });
        var app3 = new Vue({
            el: "#app-3",
            data: {
                rawHtml: "<span style='color: red;font-size: 36px'>这不是一个寻常的字体</span>"
            }
        })
    </script>
</body>
</html>